<template>

    <div class="my-statement">
        <div class="address" style="height: 148px">
            <div style="margin-left: 10px;margin-top: -100px">
                <p>您当前所在位置</p>
                <router-link to="/" class="link">我的消息</router-link>
            </div>

            <div style="margin-top: 40px;position:absolute;float:left;margin-left: 20px">
                <el-input placeholder="请输入消息标题" v-model="queryName" style="width:260px;"></el-input>
                <el-select v-model="is_yuedu" placeholder="请选择阅读状态" style="margin-left: 10px;width:260px">
                    <el-option
                            v-for="item in liangtioptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
                <el-button @click="querylistdata" style="background-color: #2d2d2d;color:#ffff00;margin-left: 20px">查询</el-button>
                <el-button @click="resetdatalist" style="background-color: #2d2d2d;color:#ffff00;margin-left: 10px">重置</el-button>
            </div>
        </div>

        <div class="ms-main" style="margin-top: 20px">
                <div style="width: 100%;overflow: hidden">
                    <el-table
                            :data="tableData"
                            style="width: 100%"
                            :header-cell-style="{ background: '#f2f2f2', color: ' #2d2d2d' }"
                    >
                        <el-table-column
                                type="index"
                                label="序号"
                                width="80"
                                align="center"
                         >
                        </el-table-column>
                        <el-table-column
                                prop="title"
                                label="标题"
                                align="left"
                        >
                        </el-table-column>
                        <el-table-column
                                prop="createTime"
                                label="发布时间"
                        >
                        </el-table-column>
                        <el-table-column
                                prop="createBy"
                                label="发布人员"
                                align="center"
                        >
                        </el-table-column>

                        <el-table-column
                                prop="type"
                                label="消息类型"
                                align="center"
                        >
                            <template slot-scope="props">
                                <el-button type="text" v-if="props.row.type == 0" size="small" :style="{ color: '#1c1c1c' }">
                                    系统公告
                                </el-button>
                                <el-button type="text" v-if="props.row.type == 1" size="small" :style="{ color: '#ea096b' }">
                                    消息
                                </el-button>
                                <el-button type="text" v-if="props.row.type == 2" size="small" :style="{ color: '#d5a606' }">
                                    邮件
                                </el-button>
                                <el-button type="text" v-if="props.row.type == 3" size="small" :style="{ color: '#878785' }">
                                    短信
                                </el-button>
                            </template>
                        </el-table-column>

                        <el-table-column
                                prop="readnumber"
                                label="阅读状态"
                                width="200"
                                align="center"
                        >
                            <template slot-scope="props">
                                <el-button type="text" v-if="props.row.readnumber <= 0" size="small" :style="{ color: '#151515' }">
                                    未读
                                </el-button>
                                <el-button type="text" v-if="props.row.readnumber > 0" size="small" :style="{ color: '#c1c1bf' }">
                                    已读
                                </el-button>
                            </template>
                        </el-table-column>

                        <el-table-column
                                prop="id"
                                label="操作"
                                width="120"
                                align="center"
                         >
                            <template slot-scope="props">
                                <a style="color: #ef950e" @click="see_msg(props.row.id)">查看详情</a>
                            </template>

                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </div>
</template>

<script>
    import Qs from "qs";
    import { postAction } from '@/api/manage'
    export default {
        data() {
            return {
                queryName:'',
                is_yuedu:'请选择阅读状态',
                liangtioptions:[
                    {
                        value: '1',
                        label: '未读'
                    },
                    {
                        value: '0',
                        label: '已读'
                    }
                ],
                token:localStorage.getItem("token"),
                currentPage: 1, // 分页，当前页
                pageData: {},// 用来存放分页用到的的数据
                url: {
                    list: "/Businesswater/getBusinesswater"
                },
                tableData: [
                    //此处存取接收的数据
                ],
            };
        },
        created() {
            // 肯定要加载数据的啦
            this.getmsgDate()
        },
        methods: {
            // 加载页面数据的方法
            getmsgDate(){
                if(this.is_yuedu=='请选择阅读状态'){
                    this.is_yuedu='';
                }
                let that = this;
                that.tableData.splice(0, that.tableData.length);
                let params2 = {
                    token:localStorage.getItem("token"),
                    queryName:this.queryName,
                    is_read:this.is_yuedu
                };
                postAction(domain.publicUrl+"/logic/interface/query_mymessage",Qs.stringify(params2)).then(res=>{
                    let result = res.data;
                    // alert(res.data.data)
                    if(result.code==0){
                        that.loaded = true;
                        let getData = res.data.data;
                        getData.forEach(v => {
                            that.tableData.push(v);
                        });
                    }
                });
            },
            querylistdata(){//查询
                this.getmsgDate();
            },
            resetdatalist(){//重置
                this.queryName='';
                this.is_yuedu='请选择阅读状态';
                this.getmsgDate();
            },
            see_msg(id){//查看消息
                // alert(id);
                let params2 = {
                    token:localStorage.getItem("token"),
                    msg_id:id
                };
                postAction(domain.publicUrl+"/logic/interface/add_read_message",Qs.stringify(params2)).then(res=>{
                    let result = res.data;
                    if(result.code==0){
                        this.$router.push({path:'/message-detail',query: {msg_id:id}})
                    }else {
                        // this.$message.error(result.msg);
                        this.$router.push({path:'/message-detail',query: {msg_id:id}})
                    }
                });

            }
        },
    };
</script>

<style lang="scss" scoped>
    .my-statement {
        box-sizing: border-box;
        padding: 30px 90px;

        .ms-main {
            background: #fff;
            box-sizing: border-box;
            padding: 20px 40px 30px;
            display: flex;

            .msm-left {
                width: 105px;
            }

            .msm-right {
                flex: 1;
                margin-left: 20px;

                .msmr-txt {
                    display: flex;
                    margin: 0 0 20px;

                    p {
                        font-size: 18px;
                        margin-right: 30px;
                        font-weight: 600;
                        color: #424242;

                        span {
                            color: #ce3815;
                            margin-left: 10px;
                        }
                    }
                }

                .msmr-pagination {
                    text-align: right;
                    margin: 35px 0 0;
                }
            }
        }
    }
</style>
